<template>
  <el-color-picker
    v-if="!viewInfo"
    :predefine="predefineColors"
    :show-alpha="config.__config.rgbType === 'rgba'"
    :value="value"
    @change="changeColor"
    :disabled="isEdit || disabled"
  ></el-color-picker>
    <div
    v-else
    :style="{
      display: 'inline-block',
      whiteSpace: 'break-spaces',
      width: config.__config.width + '%',
    }"
  >
    {{ value }}
  </div>
</template>
<script>
import myMixin from "@/pageComponents/myMixin";
import vmMixin from "@/pageComponents/vmMixin";
import { PREDEFINE_COLORS } from "@/utils/const";
export default {
  computed: {},
  mixins: [myMixin, vmMixin],
  components: {},
  data() {
    return {
      predefineColors: PREDEFINE_COLORS,
    };
  },
  async mounted() {
  },
  methods: {
    changeColor(_value) {
      this.$emit("input", _value);
      this.runEventName("change", { values: _value });
    },
  },
};
</script>
